<template>
  <Modal
    :width="680"
    :title="title"
    :visible="visible"
    :centered="true"
    @cancel="onCancel"
    @ok="handleSubmit"
    okText="提交"
  >
    <Form ref="formRef" :model="model" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
      <template v-if="tag">
        <FormItem label="ID">
          <TypographyText>{{ model?.id }}</TypographyText>
          <Divider type="vertical" />
          <TypographyText :copyable="true">
            {{ model?._id }}
          </TypographyText>
        </FormItem>
        <FormItem label="发布于">
          {{ stringToYMD(model?.create_at) }}
        </FormItem>
        <FormItem label="最后修改于">
          {{ stringToYMD(model?.update_at) }}
        </FormItem>
      </template>
      <FormItem label="标签名称" name="name" extra="这将是它在站点上显示的名字">
        <Input v-model:value="model.name" placeholder="标签名称"></Input>
      </FormItem>
      <FormItem
        label="标签别名"
        name="slug"
        extra="“别名” 是在 URL 中使用的别称，建议小写，字母、数字、连字符（-）"
      >
        <Input v-model:value="model.slug" placeholder="标签别名"></Input>
      </FormItem>
      <FormItem label="标签描述" name="description">
        <a-textarea v-model:value="model.description" :rows="4" placeholder="标签描述" />
      </FormItem>
      <FormItem
        label="自定义扩展"
        :shouldUpdate="true"
        extra="可以为当前标签增加自定义扩展属性，如：icon、background"
      >
        <FormDataKeyValue v-model:value="model.extends" />
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import FormDataKeyValue from '@/components/FormDataKeyValue/index.vue'
import type { UnwrapRef, PropType } from 'vue'
import { stringToYMD, timestampToYMD } from '@/transformers/date'
import type { Tag as TagType } from '@/constants/tag'
import { Divider, Form, FormInstance, FormItem, Input, Modal, TypographyText } from 'ant-design-vue'

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  visible: {
    type: Boolean,
    default: false,
  },
  tag: {
    type: Object as PropType<TagType | null>,
  },
  onCancel: {
    type: Function as PropType<(e: MouseEvent) => void>,
    required: true,
  },
  onSubmit: {
    type: Function,
    required: true,
  },
})

const formRef = ref<FormInstance>()
const model: UnwrapRef<TagType> = reactive({
  id: undefined,
  _id: undefined,
  name: '',
  slug: '',
  description: '',
  update_at: '',
  create_at: '',
  extends: [],
})

watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.tag) {
        model.id = props.tag.id
        model._id = props.tag._id
        model.name = props.tag.name
        model.slug = props.tag.slug
        model.extends = props.tag.extends
        model.description = props.tag.description
        model.update_at = props.tag.update_at
        model.create_at = props.tag.create_at
      } else {
        model.name = ''
        model.slug = ''
        model.description = ''
        model.extends = [
          {
            name: 'icon',
            value: 'icon-tag',
          },
        ]
        model.update_at = timestampToYMD(new Date().getTime())
        model.create_at = timestampToYMD(new Date().getTime())
      }
    } else {
      formRef.value?.resetFields()
    }
  }
)

const handleSubmit = () => {
  formRef.value
    ?.validate()
    .then(() => {
      props.onSubmit(model)
    })
    .catch(() => {
      console.log('error')
    })
}
</script>

<style lang="less">
.announcement {
  .toolbar {
    display: flex;
    justify-content: space-between;

    .select {
      width: 130px;
    }
    .search {
      width: 200px;
    }
  }
}
</style>
